<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>押金收款</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
	</head>
	<style>
		html,
		body {
			font-size: 14px;
			position: relative;
			height: 100%;
		}
		
		.mui-input-group .mui-input-row label {
			width: 30%;
			text-align: center;
			padding-top: 13px;
		}
		
		.mui-input-group .mui-input-row span,
		.mui-input-group .mui-input-row input {
			width: 70%;
			padding: 0;
			display: inline-block;
		}
		
		.mui-input-group .mui-input-row span {
			color: #999;
			padding-top: 9px;
		}
		
		.mui-input-group .mui-input-row {
			margin-top: 15px;
		}
		
		.loan {
			padding: 8px 45px;
			margin: 30px auto;
			display: block;
			font-size: 16px;
		}
		.useMark{
			padding: 8px 15px 3px;
		}
		.useMark label{
			width: auto;
			white-space: nowrap;
			padding: 3px 0;
		}
		.useMark:after {
			height: 0 !important;
		}
		
		.price {
			font-size: 18px;
			color: red;
		}
		
		.nav {
			padding: 0 30px;
			background: #fff;
			margin-bottom: 10px;
		}
		.nav-item{
			padding: 10px 0;
		}
		.nav-item span{
			/*border-bottom: 2px solid #2F81D2;*/
		}
		
		/*.nav .nav-item{
			border-bottom: 1px solid rgb(47, 129, 210);
		}*/
		.mui-col-sm-4 {
			width: 32%;
			text-align: center;
			display: inline-block;
		}
		
		.hidden{
			display: none;
		}
		ul, li, ol{
			text-align: center;
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.jp{
			background: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			font-size: 0;
			z-index: 50;
		}
		.jp table{
			width: 100%;
		}
		.jp ul li{
			width: 33.333%;
			height: 50px;
			font-size: 16px;
			display: inline-block;
			font-weight: 900;
			line-height: 50px;
			border: 1px solid #E9E9E9;
		}
		.proItem {
			background: #FFF;
			position: relative; 
			padding: 0 15px 0px 15px;
			margin: 0 15px 10px;
			border-radius: 10px;
		}
		.proItem span{
			width: 50px;
			font-size: 30px;
			line-height: 80px;
			position: absolute;
			left: 15px;
			color: #999;
			top: -5px;
		}
		.proItem input{
			width: 100%;
			border: 0;
			font-size: 30px;
			color: #FF4400;
			text-align: center;
			margin: 0;
			height: 55px;
			line-height: 55px;
		}
		.footer{
			width: 100%;
			padding: 0 15px;
		}
		.footer button{
			background: #1E90FF;
			width: 46%;
			border-radius: 8px;
			border: 0;
		}
		.footer button img{
			height: 26px;
			margin-top: 5px;
		}
		.footer button span{
			position: relative;
			top: -8px;
			left: 3px;
			color: #fff;
		}
		#div2 {
			width: 92%;
			margin: 0 4%;
			height: 45px;
			padding-left: 15px;
			border: 0;
			border-radius: 10px;
			color: #666;
		}
		#news{
			display: none;
			margin-bottom: 20px;
			padding: 0 20px;
			width: 100vw;
			height: 30px;
			line-height: 30px;
			font-size: 12px;
			background: #FFD556;
			color: #fff;
		}
		#news p{
			flex: 1; 
			color: #fff;
			margin: 0 5px;
		}
		#news .right{
			color: #1E82D2;
		}
		#news .left img{
			width: 12px;
			height: 12px;
			margin-bottom: -2px;
		}
		.new-all-nr{
			overflow-y:scroll;
			padding-bottom:250px;
		}
		/* .footer{
			overflow-y:scroll;
			max-height:100px
		} */
		.pay-btn-way-img{
			width: 30px;
			height:30px;
		}
		.top-btn-border{
			display: flex;justify-content: space-between;width:100%;margin-bottom:15px;
		}
		.left-btn{
			padding-right:7.5px;box-sizing: border-box;width: 50%;float:left;
		}
		.btn-left-apliay{
			width: 100%;background: #56ABE4;
		}
		.right-btn{
			padding-left:7.5px;box-sizing: border-box;float:left;width:50%;
		}
		.btn-left-weixin{
			width:100%;background: #4CB853;
		}
		.no-magin{
			margin-bottom:0px;
		}
		.top-btn-border button{
			width:100%;
			border-radius:30px;
			font-size:15px;
		}
		.top-btn-border button.bg-blue-btn,.bg-shenblue-btn{
			background: #56ABE4;
		}
		.top-btn-border button.bg-green-btn{
			background: #4CB853;
		}
		.top-btn-border button.bg-shenblue-btn{
			background: #2F81D2;
		}
		.big-btn{
			width:100%;
			border-radius:30px;
			
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">押金收款</h1>
		</header>
		<div class="mui-content">
			<div class="nav row">
				<div class="mui-col-sm-4 nav-item" style="color: dodgerblue;"><span style="border-bottom: 2px solid #2F81D2;">押金收款</span></div>
				<div class="mui-col-sm-4 nav-item jiesuan"><span>结算</span></div>
				<div class="mui-col-sm-4 nav-item chaxun"><span>查询</span></div>
			</div>
			<div class="new-all-nr">
			<div id="news">
				<span class="left">
					<img src="./../img/laba.png" >
				</span>
				<p>您有即将过期订单，请及时处理！</p>
				<span class="right">
					前往处理
				</span>
			</div>
			<div class="proItem">
				<span>￥</span>
				<input type="text" id="sum" placeholder="0.00" value="" maxlength="8" />
			</div>
			<input type="text" id="div2" name="" placeholder="备注信息："></input>

			<div class="mui-input-row useMark">
				<label>使用说明：</label>
				<span><a class="look">点击查看</a></span>
			</div>
			<div class="footer">
				<script type="text/template" id="diposit0">
					<div class="top-btn-border" >
						<!--<div class="left-btn">
						<button type="button" class="mui-btn face_pay btn-left-apliay bg-blue-btn" >
							<img src="../img/ic_alipay.png" class="pay-btn-way-img" />
							<span>支付宝扫脸支付</span>
						</button>
						</div>
						<div class="right-btn" >
						<button type="button" class="mui-btn weixin_face_pay btn-left-weixin bg-green-btn">
							<img src="../img/ic_wechat.png" class="pay-btn-way-img" />
							<span>微信扫脸支付</span>
						</button>
						</div>
					</div>-->
					
					{{if status=='p1'}}
					<div class="top-btn-border no-magin" >
						<div class="left-btn">
						<button type="button" class="mui-btn backCardPay btn-left-apliay bg-shenblue-btn" >
							<img src="../img/ic_deposit_unionpay.png" class="pay-btn-way-img"/>
							<span>银行卡收款</span>
						</button>
						</div>	
						<div class="right-btn" >
						<button type="button" class="mui-btn pay_scan btn-left-apliay bg-shenblue-btn">
							<img src="../img/ic_deposit_scan_white.png" class="pay-btn-way-img" />
							<span>扫码收款</span>
						</button>
						</div>
					</div>
					<!-- <button type="button" class="mui-btn backCardPay" >
						<img src="../img/ic_deposit_unionpay@2x.png"/>
						<span>银行卡预授权</span>
					</button>
					<button type="button" class="mui-btn pay_scan" style="width: 45%;float:right;margin: 5px 0 5px 2.5%;">
						<img src="../img/ic_deposit_scan_white@2x.png" />
						<span>扫码授权</span>
					</button> -->
					<!--<button type="button" class="mui-btn face_pay" style="width: 45%;margin-top: 10px;margin-right:2.5%;float:left">
						<img src="../img/face_pay_zhifubao.png" style="top: 9px;" />
						<span>支付宝扫脸预授权</span>
					</button>
					<button type="button" class="mui-btn weixin_face_pay" style="width: 45%;margin-top: 10px;margin-left:2.5%;float:right">
						<img src="../img/face_pay_wx.png" style="top: 9px;" />
						<span>微信扫脸预授权</span>
					</button>-->
					{{else}}
					<!-- <button type="button" class="mui-btn pay_scan" style="width: 100%;margin: 5px 0;">
						<img src="../img/ic_deposit_scan_white@2x.png" style="top: 9px;" />
						<span>扫码授权</span>
					</button> -->
					<div class="top-btn-border no-magin" >
					<button type="button" class="mui-btn pay_scan bg-shenblue-btn big-btn">
						<img src="../img/ic_deposit_scan_white.png" class="pay-btn-way-img" />
						<span>扫码收款</span>
					</button>
					</div>
					{{/if}}
					
					
					
				</script>
			</div>
			</div>
			<div class="jp">
				<ul>
					<li class="num">1</li>
					<li class="num">2</li>
					<li class="num">3</li>
					<li class="num">4</li>
					<li class="num">5</li>
					<li class="num">6</li>
					<li class="num">7</li>
					<li class="num">8</li>
					<li class="num">9</li>
					<li class="num">.</li>
					<li class="num">0</li>
					<li class="del">
						<img src="../img/ic_delete@2x.png" />
					</li>
				</ul>
			</div>

			
			<!--<form class="mui-input-group" style="padding-top: 10px;padding-bottom: 20px;">
				<div class="mui-input-row">
					<label>预授权押金</label>
					<input type="text" class="price" placeholder="请输入押金">
				</div>
				<div class="mui-input-row">
					<label>备注信息</label>
					<input type="text" class="remark" placeholder="请输入房号或身份证等信息">
				</div>
				<div class="mui-input-row useMark">
					<label>使用说明：</label>
					<span><a class="look">点击查看</a></span>
				</div>
				<button type="button" class="mui-btn mui-btn-success loan">扫码授权</button>
			</form>-->
		</div>
		<script type="text/javascript" src="../js/template-web.js" ></script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../js/mobile-detect.min.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" src="../js/config.js"></script>

		<script>
			mui.init();
			mui.plusReady(function() {
				var sign = false;
				
				var exp = /^(([1-9][0-9]*)|(([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2})))$/;
				var cunChuValue = 0; //存储的数值
				
				var temData = {
					status: "v1"
				};
				
				require(weburl + waitCheck, "json", "post", {
					token: localStorage.getItem("token"),
					offset: 1,
					limit: 1,
					pay_status:1
				}, function(response) {
					if (response.data != '') {
						$('#news').css('display', 'flex');
					}
				}, function() {

				})
				
				$('body').height($(window).height());
				if(getSysInfo().search("P1")!= -1) {
					temData = {
						status: "p1"
					};
				}
				
				var winHeight = $(window).height();   //获取当前页面高度
				$(window).resize(function(){
				   var thisHeight=$(this).height();
				    if(winHeight - thisHeight >50){
				         //当软键盘弹出，在这里面操作
						$(".jp").addClass("hidden");
				    }else{
				        //当软键盘收起，在此处操作
						$(".jp").removeClass("hidden");
				    }
				});
				
				
				//渲染
				var str1 = template("diposit0", temData);
				$(".footer").append(str1);
				
				$("#sum").focus(function(){
			        document.activeElement.blur();
			        $(".jp").removeClass("hidden");
			    });
			    
			    //备注栏获得焦点
			    $("#div2").focus(function(){
			    	$(".jp").addClass("hidden");
			    })
			    
			    $(".num").click(function(){
			    	var val=$("#sum").val();
			    	var valOfter=val+""+$(this).html();
			    	if(valOfter.length>8){
			    		return false;
			    	}
			    	if(exp.test(valOfter+"")||valOfter==="0"){
			    		$("#sum").val(valOfter);
			    	}
			    })
			    //点击后退按钮
			    $(".del").click(function(){
			    	var value=$("#sum").val();
			    	value = value.substr(0, value.length - 1);
					$("#sum").val(value);
			    })
				
				
				require(weburl + model_status, "json", "post", {
					token: localStorage.getItem("token")
				}, function(response) {
					console.log(JSON.stringify(response));
					if(response.status == "success") {
						sign = true;
						Bluetooth();
					} else {
						mui.alert(response.msg, " ", "确认", function() {
							back();
						}, "div");
					}
				}, function() {
					mui.alert("网络错误，请稍后再试！", " ", "确认", function() {
						back();
					}, "div");
				})

				//点击查看说明
				mui("body").on("tap", ".look", function() {
					mui.openWindow("instructions.html", "instructions.html")
				})
				
				//点击处理超时订单
				mui("body").on("tap", "#news .right", function() {
					mui.openWindow("waitCheckOut.html", "waitCheckOut.html")
				})
				
				var timeSign = false;
				//点击扫码收款或银行卡收款
			    mui("body").on("tap",".backCardPay, .pay_scan, .face_pay, .weixin_face_pay",function(){
			    	$("input").blur();
			    	var price=$("#sum").val();
			    	if(price*1>0){
//			    		$(".jp").addClass("hidden");
			    	}else{
			    		mui.alert("收款金额不合法", " ", "关闭", function() {}, "div");
			    		return false;
			    	}
			    	if($("#div2").val()==""){
			    		mui.alert("备注信息不能为空", " ", "关闭", function() {}, "div");
			    		return false;
			    	}
			    	var datas = {
						token: localStorage.getItem("token"),
						remarks: $("#div2").val(),
						price: Number(price),
					}
			    	if (!timeSign) {
			    		timeSign = true
			    	} else {
			    		return;
			    	}
			    	setTimeout(function(){
			    		timeSign = false;
			    	},3000) 
			    	if($(this).hasClass("pay_scan")){
			    		//扫码收款
			    		mui.openWindow({
							url: "./public/barcode_scan1.html",
							id: "barcode_scan1.html",
							extras: {
								datas:datas
							}
						});
						return false;
			    	};
						// 支付宝扫脸支付
			    	if($(this).hasClass("face_pay")){
			    		console.log(1);
			    		// 扫脸支付
			    		plus.nativeUI.showWaiting("正在处理中，请稍候");
			    		require(weburl + facePay, "json", "post", {
			    			token: localStorage.getItem("token"),
			    			payways: "alipay",
			    			pay_type: "fundauth",
			    			amount: price + "",
			    			remark: $('#div2').val()
			    		}, function(response){
			    			console.log(JSON.stringify(response));
			    			plus.nativeUI.closeWaiting();
			    			if(response.status == "success") {
								$(".pay_remarks").val("");
								$(".price-cash").val("0.00");
								printTicket(response.data[0].print_array);
								mui.confirm("授权成功，是否打印小票？", " ", ["打印", "关闭"], function(e) {
									if(e.index == 0) {
										printTicket(response.data[0].print_array);
										return false;
									} else {
										mui.openWindow({
											url: "./depositDetail.html",
											id: "./depositDetail.html",
											extras: {
												orderNum: response.data[0].out_order_no
											}
										})
									}
								}, "div");
			    			} else {
			    				mui.alert(response.msg, "", "关闭", function(){}, "div");
			    			}
			    		}, function(err){
			    			plus.nativeUI.closeWaiting();
			    			mui.alert("支付超时，请稍后再试", "", "关闭", function(){}, "div");
			    			console.log(err);
			    		});
						return false;
			    	};
						// 微信扫脸支付
						if($(this).hasClass("weixin_face_pay")){
							console.log(1);
							// 扫脸支付
							plus.nativeUI.showWaiting("正在处理中，请稍候");
							require(weburl + facePay, "json", "post", {
								token: localStorage.getItem("token"),
								payways: "weixin",
								pay_type: "fundauth",
								amount: price + "",
								remark: $('#div2').val()
							}, function(response){
								console.log(JSON.stringify(response));
								plus.nativeUI.closeWaiting();
								if(response.status == "success") {
								$(".pay_remarks").val("");
								$(".price-cash").val("0.00");
								printTicket(response.data[0].print_array);
								mui.confirm("授权成功，是否打印小票？", " ", ["打印", "关闭"], function(e) {
									if(e.index == 0) {
										printTicket(response.data[0].print_array);
										return false;
									} else {
										mui.openWindow({
											url: "./depositDetail.html",
											id: "./depositDetail.html",
											extras: {
												orderNum: response.data[0].out_order_no
											}
										})
									}
								}, "div");
								} else {
									mui.alert(response.msg, "", "关闭", function(){}, "div");
								}
							}, function(err){
								plus.nativeUI.closeWaiting();
								mui.alert("支付超时，请稍后再试", "", "关闭", function(){}, "div");
								console.log(err);
							});
						return false;
						};
			    	var sign=1;
			    	//银行卡普通收款
			    	require(weburl + BankOrderCreate, "json", "post", {
						token: localStorage.getItem("token"),
						amount: price+"",
						pay_type: "auth",
						remark: $('#div2').val()
					}, function(response) {
						console.log(JSON.stringify(response));
						plus.nativeUI.closeWaiting();
						if(response.status == "success") {
							var main = plus.android.runtimeMainActivity();
							var data = {
								token: localStorage.getItem("token"),
								amount: response.data[0].amount,
								barcodeType: 0+"",
								orderInfo: $("#div2").val() ? $("#div2").val() : "",
								orderNoSFT: response.data[0].out_trade_no,
								payCallUrl: weburl + "/api/",
								remark: response.data[0].remark?response.data[0].remark:''
							}
//							alert(sign++);
							main.BankCarTrade("3", JSON.stringify(data));
							return false;
						}
						mui.alert(response.msg, " ", "关闭", function() {}, "div");
					}, function(xhr) {
						plus.nativeUI.closeWaiting();
						mui.alert("创建订单失败，请稍后重试！", " ", "关闭", function() {}, "div");
					})
			    	
			   })
			    
				//点击结算
				mui("body").on("tap", ".jiesuan", function() {
					mui.openWindow("loadList.html", "loadList.html");
				})

				//点击查询
				mui("body").on("tap", ".chaxun", function() {
					mui.openWindow("loadFunc.html", "loadFunc.html");
				})

			})
		</script>
	</body>

</html>